<template>
    <div>
        <!--<el-image style="width:100px;height:100px" :src="url" :fit="fit"></el-image>-->
        <button @click="testReq">测试请求</button>
        <button @click="testPostJson">测试PostJson</button>
        <button @click="testPost">测试Post表单</button>
        <button @click="clearToken">清理token</button>
        <span>{{tt}}</span>
        <span>{{$store.state.login.isLogin}}</span>
        <p/>
        <div class="block">
            <el-carousel height="500px" :interval="6000">
                <el-carousel-item v-for="item in imgs" :key="item">
                    <el-image style="" :src="item" :fit="fit"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
  export default {
    name: "imageCarousel",
    data() {
      return {
        // fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
        // contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
        // cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容部分区域不可见。
        // none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
        // scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        imgs: [
          '',
          // ''
        ],
        fit: 'cover',
        tt: '',
        url: ''
      }
    },
    methods: {
      testReq() {
        console.log(localStorage.getItem('Authorization'));
        this.$axios.get('/list').then((data) => {
          console.log(data);
        }).catch(() => {
        });
      },
      testPostJson() {
        let self = this;
        this.$axios.post('/uapp/v1/bill/test', {
          type: 1,
          year: '2019',
          month: '01'
        }).then((data) => {
          console.log(data);
          self.tt = data.message;
        }).catch(() => {
        });
      },
      testPost() {
        this.$axios.post('/test1', this.$qs.stringify({
          type: 2,
          year: '2018',
          month: '02'
        }), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then((data) => {
          console.log(data);
        }).catch(() => {
        });
      },
      clearToken() {
        localStorage.removeItem('Authorization');
        this.$store.state.login.isLogin = false;
      },
    }
  }
</script>

<style scoped>

</style>
